<template>
    <div class="DatabaseTalents content-container">
        <div class="breadcrumb">数据库管理-推荐职位</div>
        <div class="search_box">
            <div class="form">
                <el-form  :model="query" label-width="100px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="企业名称：">
                                <el-input v-model="query.fullName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="职位名称：">
                                <el-input v-model="query.jobName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="状态">
                                <el-select v-model="query.type"  placeholder="请选择" >
                                    <el-option v-for="item in options"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-button class="btn" @click="onQuery">查询</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-button class="btnSort" @click="saveSort">保存排序</el-button>
                            <el-button class="btnSort" @click="delSort">删除</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="opt" v-loading="loading">
            <el-table :data="table" @cell-click="cellClick"
                      header-row-class-name="tab_header"
                      stripe  style="width: 100%;" height="100%"  border  @selection-change="handleSelectionChange" >
                <el-table-column type="selection" fixed min-width="35"></el-table-column>
                <el-table-column align="center" prop="jobId" label="ID" min-width="40"></el-table-column>
                <el-table-column align="center" prop="cname" label="企业名称" min-width="200"></el-table-column>
                <el-table-column align="center" prop="jname" label="职位名称" min-width="100"></el-table-column>
                <el-table-column align="center" prop="license" label="执业类型" min-width="110"></el-table-column>
                <el-table-column align="center" prop="nums" label="招聘人数" min-width="65"></el-table-column>
                <el-table-column align="center" prop="pname" label="顾问" min-width="60"></el-table-column>
                <el-table-column align="center" prop="phone" label="顾问电话" min-width="90"></el-table-column>
                <el-table-column align="center" prop="sort" label="排序" min-width="40">
                    <template slot-scope="scope">
                        <div @click="editSort(scope.row)" v-if="scope.row.jobId != index">{{scope.row.sort}}</div>
                        <input  @click.stop="noClick" type="text" style="width: 80%;text-align: center" v-model="scope.row.sort" v-if="scope.row.jobId == index">
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
                style="text-align: right;margin-right: 40px"
                background
                @current-change="pageChange"
                :current-page.sync="query.currPageNo"
                :page-size="query.pageSize"
                layout="total,prev, pager, next"
                :total="query.total"
        ></el-pagination>
    </div>
</template>

<script>
    export default {
        name: "RecomJob",
        data() {
            return {
                options:[{label:'全部',value:0},{label:'推荐',value:1},{label:'未推荐',value:2}],
                index:-1,
                deletas:"",
                table: [
                    // {
                    //     jobId: "113",
                    //     cname: "武汉怀信广志信息科技有限公司",
                    //     jname: "造价工程师",
                    //     license: "执业类型1",
                    //     nums: "5",
                    //     pname: "高女士",
                    //     phone: "13247856985",
                    //     sort: "1"
                    // }
                ],
                loading: true,
                query: {
                    fullName: "",
                    jobName: "",
                    type:1,
                    currPageNo: 1,
                    pageSize: 100,
                    total:0,
                },
            }
        }, methods: {
            delSort(){
                if(this.deletas==""){
                    this.$message({type: 'warning', message: '请选择要删除的职位!'});
                    return;
                }else{
                    let count =0;
                    if(this.deletas.indexOf(',')!=-1){
                         count = this.deletas.split(",").length;
                    }else{
                        count  = 1;
                    }
                    this.$confirm("确定要删除该"+count +"个职位吗?", '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.lAxios({
                            method: "post",
                            url: "/platform/deleteJob.do",
                            params: {jobIds:this.deletas}
                        }).then(res=>{
                            res = res.data;
                            if(res.status==0){
                                this.$message.success('删除成功');
                                setTimeout(()=>{
                                    location.reload()
                                },300)
                            }
                        })
                    }).catch(() => {});
                }
            },
            noClick(){

            },
            cellClick(row, column, cell, event){
                if(column.label==="排序"){
                    this.index = -1;
                    console.log("col",column)
                }
            },
            saveSort() {
                if(this.table.length>0){
                    let strSortIds  = "";
                    let strSorts = "";
                    console.log("table",this.table)
                    for(var i=0;i<this.table.length;i++){
                        strSortIds += this.table[i].sortId+',';
                        strSorts += this.table[i].sort+',';
                    }
                    const params = {
                        sorts:strSorts,
                        sortIds:strSortIds
                    };
                    this.lAxios({
                        method: "post", //方法
                        url: "/platform/updateJobSort.do", //路径，基础路径在main.js里面配置
                        params:  params
                    }).then(res=>{
                        res = res.data;
                        if(res.status==0){
                             this.$message.success("保存成功")
                        }else{
                            this.$message.error("保存失败")
                        }
                       // console.log("res",res)
                    })
                }
                //console.log("table",this.table)
            }, onQuery() {
                this.loading=false
                const params = {
                    ...this.query
                };
                this.lAxios({
                    method: "post", //方法
                    url: "/platform/selectJobSort.do", //路径，基础路径在main.js里面配置
                    params: this.$formatParams(params)
                }).then(res=>{
                     res = res.data;
                    if(res.status==0){
                        this.query.total = res.data.total;
                        this.table = res.data.list;
                    }
                    //console.log("res",res)
                })
            }, handleSelectionChange(val) {
                this.deletas = "";
                for(let index in val){
                   if(index==0){
                       this.deletas = val[index].jobId+"";
                   }else{
                       this.deletas += ","+val[index].jobId;
                   }
                }
                console.log("del",this.deletas);
            },editSort(row){
                this.index = row.jobId;
                console.log("row",row)
            },pageChange(){
                this.onQuery();
            }
        },created() {
            this.onQuery();
        }
    }
</script>

<style lang="scss" >
    .DatabaseTalents {
        width: 99%;
        padding-left: 1%;
        /*border: 2px solid red;*/
        background-color: #f7f9fc;
        .breadcrumb {
            margin: 10px 0;
            font-size: 14px;
            color: #333;
        }
        .search_box {
            background-color: white;
            padding: 20px 50px;
            .form {
                margin-left: -20px;
                .el-form {
                    .el-form-item__label {
                        font-weight: 700;
                        color: rgb(31, 46, 77);
                        font-family: "Arial Negreta", "Arial Normal", "Arial";
                    }
                    input{
                      height: 30px;
                    }
                }
                .btn{
                    margin-left: 20px;
                    width: 140px;
                    height: 40px;
                    background-color: #37f;
                    color: #fff;
                }
                .btnSort{
                    margin-left: 15px;
                    color:#37f;
                    background: #EBF2FF;
                    border: 1px solid #D7E4FF;
                }
            }
        }
        .table{
            background: white;
        }
        .opt{
            width: 99%;
            height:calc(100vh - 300px);
            overflow: auto;
        }
    }
</style>
